<template>
  <component :is="iconComponent" />
</template>

<script setup>
import { onBeforeMount, ref } from 'vue';

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
});

const iconComponent = ref(null);

onBeforeMount(async () => {
  iconComponent.value = await loadSvgIcon(props.name);
});

async function loadSvgIcon(name) {
  console.log(name);
  const module = await import(`@/icons/svg/${name}.svg`);
  return module.default;
}
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
